import React, { FC, ReactElement, useEffect, useState } from "react";
import { Button, Checkbox, Form, Input, message } from 'antd';
import '../assets/css/login.less'
import { LoginData } from "../services/administrator/type";
import { getAuthCode } from '../services/administrator/authCode'
import { checkloginByCode } from '../services/administrator/index'
import adImg from '../assets/images/ad.png'
import logoImg from '../assets/images/logo.png'
import { useNavigate } from "react-router";

import {useDispatch} from 'react-redux'
// interface FieldType  {
//     username?: string;
//     pwd?: string;
// };
const Login: FC = (): JSX.Element => {

    const dispatch= useDispatch();

    const navigate = useNavigate();
    const [messageApi, contextHolder] = message.useMessage();


    const onFinish = async (data: LoginData) => {

        // console.log(data);

        const res: any = await checkloginByCode({ ...data, token: imgToken }).catch(() => { });
        console.log(222222222, res);

        if (res?.errCode === 10000) {
             
 
            // sessionStorage.setItem("token",res.data.token);

            dispatch({type:"UPDATETOKEN",val:res.data.token})


            navigate("/Red");
        }
        else {
            messageApi.open({
                type: 'error',
                content: res?.errMsg ?? "登录失败",
            });
        }



    }
    const [imageCode, setImageCode] = useState("");
    const [imgToken, setImgToken] = useState("");
    const getCode = async () => {

        const res: any = await getAuthCode().catch(() => { });
        if (res?.errCode === 10000)


            setImageCode(res.imageCode);
        setImgToken(res.token);


    }
    const updatecode = () => {
        getCode();
    }

    useEffect(() => {

        getCode();

    }, [])

    return (
        <div className="loginbody">
            {contextHolder}
            <div className="top">
                <img className="logo" src={logoImg} />
            </div>
            <div className="main">

                <div className="content">

                    <div className="left">
                        <img src={adImg} />
                    </div>
                    <div className="right">

                        
            <Form
                className="loginform"
                name="basic"
                labelCol={{ span: 4 }}
                onFinish={onFinish}
                autoComplete="off"
            >

                <Form.Item<LoginData>
                    label=""
                    name="username"
                    rules={[{ required: true, message: '请输入账号' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item label="" name="pass"
                    rules={[{ required: true, message: '请输入密码' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item label="" required>
                    <div style={{display:"flex"}}>
                <Form.Item  name="verifyCode"
                    rules={[{ required: true, message: '请输入验证码' }]}
                >
                    <Input style={{width:"200px"}} />
                  
                </Form.Item>
                <img onClick={updatecode} className="imgcode" src={imageCode} />
                </div>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        登录
                    </Button>
                </Form.Item>

            </Form> 
                    </div>
                </div>

            </div>
            <div className="footer"></div>


        </div>
    )

}
export default Login;

